<template>
  <div class="article-card-container">
    <div v-if="articleType != 'video'" class="article-card-main">
      <template v-if="articleType === 'article'">
        <span class="article-title">{{ articleInfo.title }}</span>
      </template>
      <template v-if="articleType === 'article-with-image'">
        <div class="article-card-content two-column">
          <span class="article-title">{{ articleInfo.title }}</span>
          <img class="article-image" :src="articleInfo.image_url" alt="">
        </div>
      </template>
      <template v-if="articleType === 'article-with-images'">
        <div class="article-card-content two-row">
          <span class="article-title">{{ articleInfo.title }}</span>
          <div class="article-images">
            <template v-for="(imageItem, index) in articleInfo.image_list" :key="index">
              <img class="article-image-item" :src="imageItem.url" alt="">
            </template>
          </div>
        </div>
      </template>
      <template v-if="articleType === 'video'"></template>

      <div class="article-card-footer">
        <span v-if="articleInfo.label" class="label">{{ articleInfo.label }}</span>
        <span class="author">{{ articleInfo.media_name }}</span>
        <span class="comment">{{ articleInfo.comment_count }}评论</span>
        <span v-if="!articleInfo.label" class="publish_time">{{ articleInfo.publish_time }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "article-card",
  props: {
    articleInfo: { type: Object }
  },
  data() {
    return {
      // 文章类型： article(纯文字) or article-with-image(图文-单张预览图) or article-with-images(图文-多张预览图) or video(视频)
      articleType: 'article',
    }
  },
  created() {
    const { has_image, has_video, image_url } = this.articleInfo;
    if(!has_image) {
      this.articleType = 'article'
    } else {
      this.articleType = has_video ? 'video' : image_url ? 'article-with-image' : 'article-with-images'
    }
  }
}
</script>
<style lang="less" scoped>
@import "~theme/flex.less";

.article-card-container {
  flex: 1;
  margin: 0 2.8vw;
}
.article-card-main {
  padding: 1.6vw 0;
  border-bottom: .5px solid rgba(0, 0, 0, 0.05);
}
.article-title { 
  width: 100%;
  display: inline-block;
  color: #222;
  font-size: 1.48rem;
  text-align: left;
  font-weight: 500;
}
.article-card-content {
  flex: 1;
}
.two-column {
  #myFlex.rssb();
  .article-image { 
    width: 28vw;
    height: 21vw; 
    border-radius: 8px; 
    object-fit: cover; 
    object-position: center center;
    margin-left: 6vw;
  }
}
.two-row {
  #myFlex.ccs();

  .article-title { margin-bottom: 2vw; }
  .article-images {
    width: 100%;
    #myFlex.rcsb();

    .article-image-item {
      width: 32.5%;
      height: auto;
    }
  }
}

.article-card-footer {
  flex: 1;
  height: 4.8vw;
  color: #999;
  margin-top: 0.8vw;
  font-size: .24rem;
  #myFlex.rcs();

  & span { margin-right: 3.2vw; }
  .label { color: #FF0000; font-size: .27rem; }
}
</style>